<template>
  <div style="width: 100%;">
    <el-input v-model.trim="changeValues" :placeholder="placeholder" size="small" type="text"
      v-if="mode == '' && type == 'string'" />
    <el-input autosize v-model.trim="changeValues" :placeholder="placeholder" size="small" type="textarea"
      v-if="mode == 'text'" />
    <el-input-number v-model="changeValues" size="small" :min="0" :precision="0" :step="1"
      v-if="mode == '' && type == 'int'" />
    <el-input-number v-model="changeValues" size="small" :min="0" :precision="2" :step="0.01"
      v-if="mode == 'float' && type == 'float'" />
    <el-select v-model="changeValues" :placeholder="placeholder" size="small" v-if="mode == 'single'">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="changeValues" :placeholder="placeholder" size="small" v-if="mode == 'multi'">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-radio-group v-model="changeValues" v-if="mode == 'judge'">
      <el-radio :label="true" size="large">启用</el-radio>
      <el-radio :label="false" size="large">禁用</el-radio>
    </el-radio-group>
    <ReUpload v-model:files="changeValues" v-if="mode == 'uploadImage'" :limit="limit" />
    <UploadFile v-model:files="changeValues" v-if="mode == 'uploadFile'" accept="." :limit="limit" />
    <sj-editor v-model:content="changeValues" v-if="mode == 'html'"></sj-editor>
    <div class="text-[10px] text-[rgba(151,151,151,0.7)]">{{ desc }}</div>
  </div>
</template>

<script lang='ts' setup>
import { defineProps, watch, ref } from 'vue';
import ReUpload from "@/components/ReUpload/index.vue";
import UploadFile from "@/components/ReUpload/UploadFile.vue";
import SjEditor from "@/components/editor/sj-editor.vue";

const emits = defineEmits(['update:modelValues'])
const props = defineProps({
  modelValues: null,
  placeholder: null,
  mode: null,
  type: null,
  options: null,
  desc: null,
  limit: {
    type: Number,
    default: 1
  }
})
const changeValues = ref()
watch(() => props.modelValues, () => {
  changeValues.value = props.modelValues;
}, {
  immediate: true
})
watch(() => changeValues.value, () => {
  // change(changeValues.value)
  emits('update:modelValues', changeValues.value)
}, {
  immediate: true
})
</script>

<style lang='scss' scoped></style>
